import { Button, Checkbox, Popconfirm, message } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { connect } from "react-redux";
import moment from 'moment';
import { getCartListData, modifyCartListData, allCheckCartListData } from '@/store/actions/cart';
// css
import styles from '@/styles/ShoppingCart.module.scss';
// api
import { removeGoodsFromCart } from '@/api/cart';

const CartTitle = ({ total = 0, cart: { cartList, allChecked, checkedNum }, _getCartListData, _modifyCartListData, _allCheckCartListData }) => {
    // 全选
    const allCheck = (checked) => {
        const today = moment(new Date()).format('YYYY-MM-DD');
        cartList.forEach(data => {
            const { goodsCartActivityListDTO } = data;
            goodsCartActivityListDTO.forEach(g => {
                const isOutDate = new Date(today) > new Date(g.startDate);
                if(!isOutDate){
                    g.checked = checked;
                }
            })
        });
        _modifyCartListData(cartList);
        _allCheckCartListData(checked);
    }
    // 删除勾选项
    const removeCheckedItem = () => {
        const ids = [];
        cartList.forEach(data => {
            const { goodsCartActivityListDTO } = data;
            goodsCartActivityListDTO.forEach(g => {
                g.checked && ids.push(g.id)
            })
        });
        removeGoodsFromCart(ids.toString()).then(res => {
            const { code } = res;
            if(code === 0){
                message.success('已删除');
                _getCartListData()
            }
        })
    }
    return (
        <>
            <div className={styles['top']}>
                <span>全部商品 {total}</span>
                <span className={styles['btn']}>
                    <Popconfirm
                        disabled={!checkedNum}
                        placement="bottomRight"
                        title="确认删除所选中的商品吗？"
                        okText="确认"
                        cancelText="取消"
                        onConfirm={removeCheckedItem}
                    >
                        <Button icon={<DeleteOutlined />} disabled={!checkedNum}>删除选中商品</Button>
                    </Popconfirm>
                </span>
            </div>
            <div className={styles['table-title']}>
                <div className={styles['check']}>
                    <Checkbox checked={allChecked} disabled={!total} onChange={(e) => { allCheck(e.target.checked) }} />全选
                </div>
                <div className={styles['product']}>商品</div>
                <div className={styles['usedate']}>使用时间</div>
                <div className={styles['price']}>单价</div>
                <div className={styles['number']}>数量</div>
                <div className={styles['total']}>小计</div>
                <div className={styles['operate']}>操作</div>
            </div>
        </>
    )
}
const mapStateToProps = state => {
    return {
        cart: state.cart
    }
}
const mapDispatchToProps = dispatch => {
    return {
        _getCartListData: v => dispatch(getCartListData(v)),
        _modifyCartListData: v => dispatch(modifyCartListData(v)),
        _allCheckCartListData: v => dispatch(allCheckCartListData(v)),
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(CartTitle)